﻿{extend name="public:base" /}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <!--<div class="box-item layui-form-item adminj-sort-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label layui-form-label">省</label>
                                <div class="col-sm-3">
                                    <input type="text" name="province" value="{$info.province}" class="form-control" placeholder="请输入省">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item layui-form-item adminj-sort-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label layui-form-label">市</label>
                                <div class="col-sm-3">
                                    <input type="text" name="city" value="{$info.city}" class="form-control" placeholder="请输入市">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item layui-form-item adminj-sort-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label layui-form-label">区</label>
                                <div class="col-sm-3">
                                    <input type="text" name="area" value="{$info.area}" class="form-control" placeholder="请输入区">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>-->

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">兴趣</label>
                                <div class="col-sm-3">
                                    <select class="form-control province" name="province_id">
                                        <option value="0">请选择</option>
                                        {volist name="region_list" id="vo"}
                                        <option value="{$vo.id}" {$info.province_id == $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control city" name="city_id">
                                        <option value="0">请选择</option>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select class="form-control area" name="area_id">
                                        <option value="0">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>


                        <input type="hidden" name="id" value="{:input('id')}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var region_list = {$region_list_json};
    var city_list;

    $(function (){
        var id = "{:input('id')}";
        var province_id = "{$info.province_id}";
        var city_id = "{$info.city_id}";
        var area_id = "{$info.area_id}";

        if(id > 0){
            for (let i in region_list) {
                if (province_id == region_list[i].id) {
                    city_list = region_list[i].city_list;
                    break;
                }
            }
            renderOption(city_list, 'city', city_id);

            for (let i in city_list) {
                if (city_id == city_list[i].id) {
                    area_list = city_list[i].area_list;
                    break;
                }
            }
            renderOption(area_list, 'area', area_id);
        }
    })

    $('.province').change(function (){
        var id = $(this).val();

        for (let i in region_list) {
            if(id == region_list[i].id){
                city_list = region_list[i].city_list;
                break;
            }
        }

        renderOption(city_list, 'city');
    })

    $('.city').change(function (){
        var id = $(this).val();

        for (let i in city_list) {
            if (id == city_list[i].id) {
                var area_list = city_list[i].area_list;
                break;
            }
        }
        renderOption(area_list, 'area');
    })

    function renderOption(region_list, class_name, id = 0){
        var option = '<option value="0">请选择</option>';
        var selected = '';
        for (let i in region_list) {
            selected = id == region_list[i].id ? 'selected' : '';
            option += '<option '+ selected +' value="' + region_list[i].id + '">' + region_list[i].name + '</option>';
        }
        $('.' + class_name).html(option);
    }

</script>
{/block}